import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载组件

export const lazyPlugin={
    install(app){
        //懒加载指令逻辑
        app.directive('img-lazy',{
            mounted(el,binding){
                // el:指定保定的那个元素 img
                // binding：binding.value 指令等于号后面绑定的表达值 图片url
                // console.log(el,binding.value)
        
                //图片懒加载 vueuse 
                const {stop}=useIntersectionObserver(
                    el,
                    ([{ isIntersecting }], observerElement) => {
                        // console.log(isIntersecting)
                        if(isIntersecting){
                            //进入视口区域
                            el.src=binding.value
                            //第一次加载后手动停止监听，避免资源浪费
                            stop()
                        }
                    },
                  )
            }
        })
    }
}